<template>
	<div v-if="slave.sensors.real.length" class="databox">
		<div v-for="item in slave.sensors.real" :key="item.id" :class="(item.show_type==11 ||
	        item.show_type==12)?'itembox_6':'itembox'" >
			<div class="imgbox">
				<img v-if="item.icon" :src="baseurl+item.icon" class="pic" />
				<img v-else :src="baseurl+'static/images/icon/icon1.png'" class="pic" />
			</div>
			<div :class="(item.show_type==11 ||
	    item.show_type==12)?'valuebox_6':'valuebox'">
				<div class="roundline" style="position:
	        relative;">
					<span v-if="item.show_type==1" class="read" title="只读数值">{{item.value}}</span>
					<span v-else-if="item.show_type==2" class="write" @click="changeVal(item,1)"
						title="读写数值，点击可设值">{{item.value}}</span>
					<label class="switch switch-green switch-read" v-else-if="item.show_type==3" title="只读开关">
						<input type="checkbox" :checked="item.value==1?true:false" :disabled="true"
							class="switch-input">
						<span class="switch-label" data-on="On" data-off="Off"></span>
						<span class="switch-handle"></span>
					</label>
					<!-- <el-switch v-else-if="item.show_type==3"
						v-model="item.value" :width="stateWidth"
						class="demo turn" active-color="#13ce66"
						inactive-color="#ccc" active-text="开" inactive-text="关"
						title="只读开关" :disabled="true" :active-value="one"
						:inactive-value="zero">
					</el-switch> -->
					<label class="switch switch-green" v-else-if="item.show_type==4" title="读写开关，点击操作">
						<input type="checkbox" :checked="item.value==1?true:false" @change="changeState(item,1,$event)"
							:disabled="false" class="switch-input">
						<span class="switch-label" data-on="On" data-off="Off"></span>
						<span class="switch-handle"></span>
					</label>
					<!-- <el-switch v-else-if="item.show_type==4"
						v-model="item.value" :width="stateWidth"
						@change="changeState(item,1,$event)" class="demo turn"
						active-color="#13ce66" inactive-color="#ccc"
						active-text="开" inactive-text="关" title="读写开关，点击操作"
						:disabled="false" :active-value="one"
						:inactive-value="zero">
					</el-switch> -->
					<span v-else-if="item.show_type==5" :class="item.value==1?'yes':'no'" style="float:left;"
						title="只读状态"></span>
					<span v-else-if="item.show_type==15" :class="item.value==1?'yes':'no_grey'" style="float:left;"
						title="只读状态(明暗)"></span>
					<div v-else-if="item.show_type==6" class="bt_outer" @click="changeState2(item,1)"
						title="读写状态,点击可设值">
						<span :class="item.value==1?'bt_inner_on':'bt_inner_off'"></span>
					</div>
					<i v-else-if="item.show_type==7" class="el-icon-bell" :class="item.value==1?'alarm_on':'alarm_off'"
						title="只读报警"></i>
					<i v-else-if="item.show_type==13" class="el-icon-bell"
						:class="item.value==1?'alarm_off':item.value==0 && equip.is_on==1?'alarm_on':'alarm_off'"
						title="只读报警(反)"></i>
					<i v-else-if="item.show_type==8 &&
	            item.value" class="el-icon-message-solid
	            alarm_on" title="读写报警,点击可清除" @click="changeState3(item,1)"></i>
					<i v-else-if="item.show_type==8 &&
	            (!item.value)" class="el-icon-message-solid
	            alarm_off" title="读写报警,未报警,不可操作"></i>
					<span v-else-if="item.show_type==9" class="read" title="只读字符串"
						style="width:100%;">{{item.value}}</span>
					<span v-else-if="item.show_type==10" class="write" @click="changeVal(item,1)" title="读写字符串，点击可设值"
						style="width:100%;">{{item.value}}</span>
					<el-radio-group v-else-if="item.show_type==11" v-model="item.value" title="只读多位开关" :disabled="true">
						<el-radio v-for="(value,key,index)
	                in item.ext_vars" :key="index" :label="Number(key)" class="rad
	                over">{{value}}</el-radio>
					</el-radio-group>
					<el-radio-group v-else-if="item.show_type==12" v-model="item.value" @change="changeState4(item,1)"
						title="读写多位开关，点击可设值" :disabled="false">
						<el-radio v-for="(value,key,index)
	                in item.ext_vars" :key="index" :label="Number(key)" class="rad
	                over">{{value}}</el-radio>
					</el-radio-group>
					<span v-if="(item.show_type==1 ||
	            item.show_type==2)"    :class="item.show_type==1?'readUnit':'writeUnit'">{{item.unit}}</span>
					<!-- <el-button v-if="item.show_type<9 ||
	            item.show_type>12" class="btn
	            turnbtn" style="width:1rem;" @click="roundLineLive(item)">曲线</el-button> -->
					<!-- <i v-if="item.show_type%2==0"   class="el-icon-edit turnbtn" style="font-size:0.5rem;border:none;cursor: pointer;right:0.9rem;color:deepskyblue;" @click="writeValue()"></i> -->
					<img v-if="item.show_type==1 || item.show_type==5 || item.show_type==15" class="turnbtn"
						style="width:0.6rem;border:none;height:0.5rem;cursor:pointer;" src="../../static/echart.png"
						@click="roundLineLive(item,equip.type)" />
				</div>
				<div class="roundline">
					<!-- <span class="nameLine over" :style="{'color':item.is_virtual==1?'deepskyblue':''}" :title="item.sensor_name">{{item.sensor_name}}</span> -->
					<span class="nameLine over" :title="item.sensor_name">{{item.sensor_name}}</span>
					<!-- <el-button v-if="item.save_type!=2
	                && (item.show_type<9 ||
	                item.show_type>12)" style="float:right;" class="btn"
						@click="roundLineHis(item)">历史曲线</el-button> -->
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'SensorRealData',
		data() {
			return {
				one: 1,
				zero: 0,
				stateWidth: 56,
				stateWidth_2: 80
			}
		},
		props: ['equip', 'slave', 'baseurl', 'changeState', 'changeVal', 'changeState2', 'changeState3', 'changeState4',
			'roundLineLive'
		],
	}
</script>

<style scoped>
	@import url("../assets/sensorData.css");
	/*以下为开关样式 */
	@import url("../assets/newSwitch.css");
</style>
<style scoped>
	/* .switch-label:before,
	.switch-label:after {
		line-height: 4px !important;
	} */
</style>
